<template>
	<div class="ac_view">
		<van-nav-bar :fiex="true" :border="false" title="实名认证" left-arrow @click-left="onClickLeft" />
		
			<div class="a_solid"></div>
			<!-- 还未实名认证 -->
			
			<transition name="fold-left">
				
				<div class="w_itemt" v-if="smrzStatus == -1 || smrzStatus == 2">
					<div class="wi_iptViews">
						<p>姓名</p>
						<input placeholder="请输入真实姓名" v-model="sm_realname" type="text" value="" />
					</div>
					
					<div class="wi_iptViews">
						<p>开户行</p>
						<input placeholder="请输入开户行" v-model="sm_khhname" type="text" value="" />
					</div>
					
					<div class="wi_iptViews">
						<p>银行卡号</p>
						<input placeholder="请输入银行卡号" v-model="bankcard" type="number" value="" />
					</div>
					
					<div class="wi_iptViews">
						<p>身份证</p>
						<input placeholder="请输入身份证" v-model="sm_yyzzname" type="" value="" />
					</div>
					<!-- 
					<div class="wi_iptViews">
						<p>手机号</p>
						<input placeholder="请输入手机号码" v-model="phone" type="number" value="" />
					</div>
					 -->
					<!-- <div class="wi_iptViews">
						<p>验证码</p>
						<input placeholder="请输入验证码" v-model="bankcard" type="number" value="" />
					</div> -->
					
					<div class="wi_upload">
						<p style="margin: .35rem 0;font-size: .28rem;">请上传认证照片</p>
						<div style="display: flex;">
							<div style="flex: 1;">
								<div style="text-align: center;position: relative;height: 2.03rem;overflow: auto;">
									<input @change="upLoad('0',$event)" style="position: absolute;width: 95%;height: 100%;opacity: 0;" type="file" value="" />
									<img style="width: 95%;" :src="yhk == '' ? myApp.srcPath('yhk.png') : myApp.GetDomaiName() + yhk" alt="">
								</div>
								<p style="font-size: .24rem;text-align: center;margin-top: .15rem;">身份证头像面上传</p>
							</div>
							
							<div style="flex: 1;">
								<div style="text-align: center;position: relative;height: 2.03rem;overflow: auto;">
									<input @change="upLoad('1',$event)" style="position: absolute;width: 95%;height: 100%;opacity: 0;" type="file" value="" />
									<img style="width: 95%;" :src="yyzz == '' ? myApp.srcPath('yyzz.png') : myApp.GetDomaiName() + yyzz" alt="">
								</div>
								<p style="font-size: .24rem;text-align: center;margin-top: .15rem;">身份证国徽面上传</p>
							</div>
						</div>
					</div>
					
					<div style="font-size: .2rem;color: #666666;margin-top: .38rem;">拍摄时请确保身份证边框完整、字迹清晰、亮度均衡</div>
					
					<div v-if="smrzStatus == 2" @click="UpSmrz" class="w_qr">
						重新提交
					</div>
					
					<div v-if="smrzStatus == -1" @click="UpSmrz" class="w_qr">
						提交
					</div>
				
				</div>
			
			</transition>
			
			
			
			<!-- 实名认证审核中  或者  实名认证成功-->
			
			<transition name="fold-left">
				<div class="w_itemt" v-if="smrzStatus == 0 || smrzStatus == 1">
					<div class="wi_iptViews delSolid">
						<p>姓名</p>
						<input placeholder="请输入真实姓名" v-model="sm_realname" readonly="readonly" type="text" value="" />
					</div>
					
					<div class="wi_iptViews delSolid">
						<p>开户行</p>
						<input placeholder="请输入开户行" v-model="sm_khhname"  readonly="readonly" type="text" value="" />
					</div>
					
					<div class="wi_iptViews delSolid">
						<p>银行卡号</p>
						<input placeholder="请输入银行卡号" v-model="bankcard"  readonly="readonly" type="number" value="" />
					</div>
					
					<div class="wi_iptViews delSolid">
						<p>身份证</p>
						<input placeholder="请输入身份证" v-model="sm_yyzzname"  readonly="readonly" type="" value="" />
					</div>
					
					<div class="wi_upload" v-if="smrzStatus == 0">
						<p v-if="smrzStatus == 0" style="margin: .35rem 0;font-size: .28rem;">请上传认证照片</p>
						<div style="display: flex;">
							<div style="flex: 1;">
								<div style="text-align: center;position: relative;height: 2.03rem;overflow: auto;">
									<img style="width: 95%;" :src="yhk == '' ? myApp.srcPath('yhk.png') : myApp.GetDomaiName() + yhk" alt="">
								</div>
								<p style="font-size: .24rem;text-align: center;margin-top: .15rem;">身份证头像面上传</p>
							</div>
							
							<div style="flex: 1;">
								<div style="text-align: center;position: relative;height: 2.03rem;overflow: auto;">
									<img style="width: 95%;" :src="yyzz == '' ? myApp.srcPath('yyzz.png') : myApp.GetDomaiName() + yyzz" alt="">
								</div>
								<p style="font-size: .24rem;text-align: center;margin-top: .15rem;">身份证国徽面上传</p>
							</div>
						</div>
					</div>
					
					<div v-if="smrzStatus == 0" style="font-size: .2rem;color: #666666;margin-top: .38rem;">拍摄时请确保身份证边框完整、字迹清晰、亮度均衡</div>
				
					<div v-if="smrzStatus == 1" @click="smrzStatus = -1" class="w_qr">
						修改
					</div>
					
					<div v-if="smrzStatus == 0" class="w_qr" style="background-color: #999999;color: white;">
						正在审核...
					</div>
				
				</div>
			</transition>
			
		
		</div>
		
		
		
	</div>

</template>

<script>
	import Vue from 'vue';
	import {
		NavBar,
		Toast,
		RadioGroup,
		Radio
	} from 'vant';

	Vue.use(NavBar);
	Vue.use(Radio);
	Vue.use(RadioGroup);
	
	import {UpLoad,UpSmrz,CheckSmrz} from '../serve/api.js'

	export default {
		created() {
			
			this.CheckSmrz()
			
		},
		data(){
			return{
					
				radio:1,
				
				//真实姓名
				sm_realname:"",
				
				//开户行名称
				sm_khhname:"",
				
				//银行卡号
				bankcard:"",
				
				//身份证头像面照片
				yhk:"",
				
				//身份证国徽面照片
				yyzz:"",
				
				//实名认证状态 0 未审核 1 审核通过  2审核驳回
				smrzStatus:"",
				
				//身份证号码
				sm_yyzzname:""
					
			}
		},
		
		methods: {
			
			
			//实名认证 修改提交
			UpSmrz(){
				
				if(this.sm_realname.trim() < 2){
					
					Toast("真实姓名请填写正确")
					
					return
					
				}
				
				if(this.sm_khhname.trim() < 2){
					
					Toast("开户行请填写正确")
					
					return
					
				}
				
				if(this.bankcard.trim().length < 16){
					
					Toast("银行卡号请填写正确")
					
					return
					
				}
				
				if(!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/.test(this.sm_yyzzname)){
					
					Toast("身份证格式请填写正确")
					
					return
					
				}
				
				if(this.yhk == ""){
					
					Toast("身份证头像面请上传")
					
					return
					
				}
				
				if(this.yyzz == ""){
					
					Toast("身份证国徽面请上传")
					
					return
					
				}
				
				let params = {
					
					sm_realname:this.sm_realname,
					
					sm_khhname:this.sm_khhname,
					
					sm_nums:this.bankcard,
					
					sm_yyzzname:this.sm_yyzzname,
					
					sm_bank_pic:this.yhk,
					
					sm_yyzz_pic:this.yyzz,
					
				}
				
				UpSmrz(params ,(res) => {
					
					Toast(res.data.msg)
					
					if(res.data.code == 1){
						
						this.smrzStatus == 0
						
						this.$router.push('/Personal')
						
					}
					
					// console.log(res)
					
				},(errpr) => {
					
					
				})
				
			},
			
			//实名认证状态
			CheckSmrz(){
				
				let params;
				
				CheckSmrz(params, (res) => {
					
					// console.log(res.data.data)
					
					//-1未提交 0 未审核 1 审核通过  2审核驳回  如果数据为空 则是未实名认证
					if(res.data.data.is_sh == undefined){
						
						this.smrzStatus = -1
						
						return
						
					}
					
					this.smrzStatus = res.data.data.is_sh
					
					if(res.data.data.is_sh == 0 || res.data.data.is_sh == 1 || res.data.data.is_sh == 2){
						
						this.sm_realname = res.data.data.sm_realname
						
						this.sm_khhname= res.data.data.sm_khhname
						
						this.bankcard = res.data.data.sm_nums
						
						this.sm_yyzzname = res.data.data.sm_yyzzname
						
						this.yhk = res.data.data.sm_bank_pic
						
						this.yyzz = res.data.data.sm_yyzz_pic
						
					}
					
					if(res.data.data.is_sh == 2){
						
						Toast('审核失败已被驳回,请重新提交!');
						
					}
					
				},(error) => {
					
					
				})
				
			},
			
			//上传图片
			upLoad(type,e){
				
				// console.log(e.target.files[0])
				
				let params = new FormData()
				
				params.append('file' ,e.target.files[0])
				
				UpLoad(params,(res) => {
					
					// console.log(res.data.info)
					
					if(type == 0){
						
						if(res.data.code == 1){
						
							this.yhk =  res.data.info
							
						}
						
					}else{
						
						if(res.data.code == 1){
						
							this.yyzz = res.data.info
							
						}
						
					}
					
					Toast(res.data.msg)
					
				},(error) => {
					
				})
				
				
			},
			
			onClickLeft() {
				// Toast('返回');
				this.$router.go(-1)

			},
			onClickRight() {
				Toast('按钮');
			},
		},
	};
</script>

<style scoped="">
	
	.wi_iptViews input{
		margin-left: .35rem;
	}
	
	.wi_iptViews{
		padding: .35rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: .24rem;
		border-bottom: 1px solid #F1F1F1;
	}
	
	
	.delSolid{
		border: none !important;
	}
	
	.wq_bot{
		text-align: center;
		margin-top: .16rem;
		color: #999999;
		font-size: .24rem;
		margin-bottom: 1rem;
	}
	
	.w_qr{
		margin: auto;
		width:3.8rem;
		height:.66rem;
		background:rgba(29,88,255,1);
		border-radius:.33rem;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .32rem;
		margin-top: 1.3rem;
		margin-bottom: .5rem;
	}
	
	.wit_left img{
		width: .87rem;
		height: .52rem;
		margin-right: .39rem;
	}
	
	.wit_view{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: .61rem;
	}
	
	.wit_left{
		font-size: .28rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.w_sxf {
		font-size: .24rem;
		color: #999;
		margin-top: .3rem;
	}

	.wi_itpView input::placeholder {
		color: rgb(241, 241, 241);
	}

	.wi_itpView input {
		width: 60%;
		font-size: .72rem;
	}

	.wi_itpView {
		border-bottom: 1px solid #F1F1F1;
		padding: .3rem .21rem .3rem 0rem;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #1D58FF;
		font-size: .24rem;
	}

	.wi_title {
		font-size: .32rem;
	}

	.w_itemt {
		position: absolute;
		padding: .46rem .41rem .3rem .41rem;
		box-sizing: border-box;
		background-color: white;
		width: 100%;
	}

	.w_top img {
		width: 2.1rem;
		height: 1.47rem;
		margin-bottom: .32rem;
	}

	.w_top {
		display: flex;
		flex-direction: column;
		background-color: white;
		align-items: center;
		color: #1D58FF;
		font-size: .28rem;
		padding-bottom: .56rem;
		padding-top: .48rem;
	}

	.uploadDiv input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.uploadDiv {
		position: relative;

	}

	.su_view {
		font-size: .28rem;
		padding: 0rem 0.25rem;
		box-sizing: border-box;
	}

	.su_item {
		border-bottom: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: .25rem .25rem;
		box-sizing: border-box;
	}

	.su_item img {
		width: 1.12rem;
		height: 1.12rem;
	}

	.su_itemt {
		padding-top: .5rem;
	}
	
	.a_solid{
		width: 100%;
		height: .17rem;
		background-color: rgb(251,251,251);
	}

	.ac_view {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>
